<template>
  <div class="comment-item-wrapper">
    <img
      :src="computeAvatarUrl(comment.avatar)"
      alt="Avatar"
      @click="routeToAuthor(comment.authorId)"
    />
    <div class="comment-wrapper">
      <div class="comment-author-info">
        {{ comment.username || 'xxx' }}
      </div>
      <p class="comment-content">{{ comment.content }}</p>
      <div class="comment-reply">
        <ul class="operations">
          <li
            class="like"
            @click="likeComment"
            :class="{ colorBlue: comment.isLike }"
          >
            <i class="iconfont icon-like"></i>
            <span>10</span>
          </li>
          <li class="comment" @click="toggleIsReplying">
            <i class="iconfont icon-comment"></i>
            <span>10</span>
          </li>
        </ul>
        <div class="reply-submit-wrapper" v-show="isReplying">
          <text-area
            :maxlength="500"
            class="reply-submit-textarea"
            v-model:value="replyContent"
          ></text-area>
          <button
            class="reply-submit-button"
            ref="replySubmitBtn"
            @click="replyComment"
          >
            回复
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import TextArea from '@/components/utils/Input/TextArea.vue'
import config from '@/config'
import { post } from '@/utils/request'
import { ref, Ref } from 'vue'
import { show } from '@/utils/popup'

const props = defineProps<{
  comment: App.Comment
  contentType: string
}>()

let isReplying = ref(false)
let replyContent = ref('')

function computeAvatarUrl(avatar: string) {
  return avatar
    ? config.baseURL + avatar
    : config.baseURL + config.defaultAssetUrls.avatar
}

function toggleIsReplying() {
  isReplying.value = !isReplying.value
}

function likeComment() {
  post(`${props.contentType}/content/comment/like`, {
    id: props.comment.id,
  })
    .then(() => {
      props.comment.isLike = !props.comment.isLike
    })
    .catch(() => {
      show('操作失败')
    })
}

let replySubmieBtn: Ref<HTMLButtonElement | null> = ref(null)
function replyComment() {
  if (replyContent.value === '') {
    show('请先填写回复内容')
    return
  }
  let btn = replySubmieBtn.value as HTMLButtonElement
  btn.disabled = true
  post(`${props.contentType}/content/comment/reply/submit`, {
    id: props.comment.id,
    content: replyContent.value,
  })
    .then(() => {
      show('回复成功!')
      replyContent.value = ''
      btn.disabled = false
    })
    .catch(() => {
      show('回复失败')
      btn.disabled = false
    })
}

// TODO: route to author
function routeToAuthor(id: string) {}
</script>

<style lang="scss" scoped>
$w: var(--commentItemWidth);
$fs: calc($w * 0.025);
$a: calc($w * 0.06);

.comment-item-wrapper {
  height: 100%;
  padding: $fs 0;

  display: flex;
  justify-content: left;
  border-bottom: 1px solid var(--light);

  img {
    width: $a;
    height: $a;
    border-radius: 50%;

    overflow: hidden;

    &:hover {
      cursor: pointer;
    }
  }

  .comment-wrapper {
    margin-left: calc($w * 0.03);
    width: calc($w * 0.8);

    .comment-author-info {
      margin-bottom: calc($fs * 0.3);

      font-size: calc($fs * 0.8);
      line-height: 1.5;
      font-family: Arial, Helvetica, sans-serif;
    }

    .comment-content {
      font-size: calc($fs * 0.7);
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
        sans-serif;
      line-height: calc($fs * 1.5);
      min-height: calc($fs * 1.5);

      word-break: break-all;
      white-space: pre-wrap;
    }

    .comment-reply {
      .operations {
        height: calc($w * 0.03);

        display: flex;
        justify-content: left;
        align-items: center;

        li {
          padding: 0;

          display: flex;
          justify-content: center;
          align-items: center;

          height: 100%;

          &:not(:first-child) {
            margin-left: calc($w * 0.02);
          }

          &:hover {
            color: var(--blue);
            cursor: pointer;
          }

          i,
          span {
            font-size: calc($w * 0.015);
            pointer-events: none;
          }

          span {
            margin-left: calc($w * 0.01);
          }
        }
      }

      .reply-submit-wrapper {
        margin-top: $fs;

        .reply-submit-textarea {
          --textAreaWidth: calc($w * 0.8);
          --textAreaHeight: calc($w * 0.1);
        }

        .reply-submit-button {
          margin-top: calc($w * 0.015);
          float: right;

          width: calc($fs * 3.5);
          height: calc($fs * 1.8);
          border: 1px solid var(--gray);
          border-radius: calc($fs * 0.2);

          line-height: calc($fs * 1.8);
          font-size: calc($fs * 0.8);

          &:hover {
            border-color: var(--blue);
            color: var(--blue);
          }
        }
      }
    }
  }
}
</style>
